<template>
  <button
  type="button"
  @click="handClick"
  :class="{
    'btn-font':fontStyle,
    'btn':fontStyle,
    'btn-dateils': isDateils
  }">{{name}}</button>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    fontStyle: {
      type: Boolean,
      default: false
    },
    isDateils: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handClick () {
      console.log(213213)
      this.$emit('handleClick', true)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/scss/public/var.scss';
.btn {
  width: 14.25rem;
  height: 2rem;
  background :$colorRedBtn;
  border-radius: 2rem;
  border: none;
  font-size: 1.2rem;
  font-family: PingFangSC-Regular;
}
.btn-font {
  color: $colorWhite;
  line-height: 1.65rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.btn-dateils {
  position: fixed;
  color: $colorWhite;
  background: $colorRedBtn;
  box-shadow: 0rem .05rem .1rem 0rem rgba(191, 0, 8, 1), 0rem .1rem .25rem 0rem rgba(191, 0, 8, 1);
  border-radius: 5rem 0rem 0rem 5rem;
  width: 5.5rem;
  height: 1.4rem;
  border: none;
  right: 0;
  bottom: 2rem;
}
</style>
